<template>
  <div>
    <FormPanel ref="formPanel" :list="formList" :cols="1" :labelWidth="100" :formType="type" :isSubmitBtn="false" />
    <FilterTable
      ref="table"
      height="400px"
      :isSelectColumn="false"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'rows'"
      columnsRef="lxjczclglownerVehicleTable"
      :onColumnsChange="columns => (this.columns = columns)"
    >
    </FilterTable>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { getPostCode } from '@/api/customerRepair/customerInfo/ownerVehicleManagement';
import { getVehicleInfo } from '@/api/customerRepair/customerInfo/ownerVehicleManagement';
import { confirmAction, notifyAction, isFormEmpty } from '@/utils';
export default {
  name: 'lxjczclglownerVehicle',
  mixins: [dictionary],
  props: ['type', 'customerInfo'],
  data() {
    return {
      // dataList: [],
      fetchApi: getVehicleInfo,
      fetchParams: { xhrAbort: true },
      columns: this.createTableColumns(),
      formList: this.createFormList()
    };
  },
  watch: {
    customerInfo(val) {
      this.checkChangeHandle();
    }
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  },
  methods: {
    async checkChangeHandle() {
      // console.log('现有车辆', this.customerInfo);
      this.BaseTable.START_LOADING();
      if (this.customerInfo && !isFormEmpty(this.customerInfo.ownerNo)) {
        this.fetchParams = { ownerNo: this.customerInfo.ownerNo };
      }
      this.BaseTable.STOP_LOADING();
    },
    createFormList() {
      return [
        {
          type: 'BREAK_SPACE',
          label: '现有车辆'
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '牌照号',
          dataIndex: 'license',
          showOverflowTooltip: true
        },
        {
          title: 'VIN',
          dataIndex: 'vin',
          showOverflowTooltip: true
        },
        {
          title: '发动机号',
          dataIndex: 'engineNo',
          showOverflowTooltip: true
        },
        {
          title: '品牌',
          dataIndex: 'brandName',
          showOverflowTooltip: true
        },
        {
          title: '车系',
          dataIndex: 'seriesName',
          showOverflowTooltip: true
        },
        {
          title: '车型',
          dataIndex: 'modelName',
          showOverflowTooltip: true
        },
        {
          title: '配置',
          dataIndex: 'apAckAgeName',
          showOverflowTooltip: true
        },
        {
          title: '选装',
          dataIndex: 'optionName',
          showOverflowTooltip: true
        },
        {
          title: '内饰颜色',
          dataIndex: 'innerColorName',
          showOverflowTooltip: true
        },
        {
          title: '外饰颜色',
          dataIndex: 'outColorName',
          showOverflowTooltip: true
        },
        {
          title: '车辆性质',
          dataIndex: 'businessKind',
          showOverflowTooltip: true,
          render: props => {
            return <span>{this.createDictText(props.row.businessKind, 4103)}</span>;
          }
        },
        {
          title: '车辆用途',
          dataIndex: 'vehiclePurpose',
          showOverflowTooltip: true,
          render: props => {
            return <span>{this.createDictText(props.row.vehiclePurpose, 1511)}</span>;
          }
        },
        {
          title: '生产日期',
          dataIndex: 'productDate',
          showOverflowTooltip: true,
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '销售日期',
          dataIndex: 'salesDate',
          showOverflowTooltip: true,
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '排量／功率',
          dataIndex: 'engineDesc',
          showOverflowTooltip: true
        },
        {
          title: '电机号１',
          dataIndex: 'motorNo1',
          showOverflowTooltip: true
        },
        {
          title: '电机号2',
          dataIndex: 'motorNo2',
          showOverflowTooltip: true
        },
        // {
        //   title: '燃料类别',
        //   dataIndex: 'fuelType',
        //   showOverflowTooltip: true
        // },
        {
          title: '排放标准',
          dataIndex: 'dischargeStandrd',
          showOverflowTooltip: true
        },
        // {
        //   title: '产地',
        //   dataIndex: 'productingArea',
        //   showOverflowTooltip: true
        // },
        {
          title: '厂牌型号',
          dataIndex: 'brandModel',
          showOverflowTooltip: true
        },
        {
          title: '婚姻状况',
          dataIndex: 'ownerMarriage',
          showOverflowTooltip: true,
          render: props => {
            return <span>{this.createDictText(this.customerInfo.ownerMarriage, 8018)}</span>;
          }
        },
        {
          title: '喜欢联系方式',
          dataIndex: 'bestConcatType',
          showOverflowTooltip: true,
          render: props => {
            return <span>{this.createDictText(this.customerInfo.bestConcatType, 9123)}</span>;
          }
        },
        // {
        //   title: '送修人性别',
        //   dataIndex: 'songxiurengender',
        //   showOverflowTooltip: true
        // },
        {
          title: '爱好',
          dataIndex: 'hobby',
          showOverflowTooltip: true,
          render: props => {
            return <span>{this.customerInfo.hobby && this.translateHobby(this.customerInfo.hobby)}</span>;
          }
        },
        {
          title: '子女状况',
          dataIndex: 'isChlidren',
          showOverflowTooltip: true,
          render: props => {
            return <span>{this.createDictText(this.customerInfo.isChlidren, 1004)}</span>;
          }
        },
        {
          title: '家庭收入',
          dataIndex: 'familyIncome',
          showOverflowTooltip: true,
          render: props => {
            return <span>{this.createDictText(this.customerInfo.familyIncome, 1290)}</span>;
          }
        }
      ];
    },
    translateHobby(hobbyArr) {
      let arr = hobbyArr.map(item => this.createDictText(item, 8020));
      return arr.join(',');
    }
  }
};
</script>

<style lang="less" scoped>
.wrapper {
  height: calc(100vh - 135px);
}
</style>
